<template>
	<custom-page :title="getTitle" backgroundColor="#F9F9FB">
		<template #page>
			<view class="page-content">
				<common-list-view class="list-view">
					<template #content>
						<template v-if="type == 'tag'">
							<view class="top-title">请选择个性标签</view>
							<view class="flex-wrap-row">
								<view :class="getTagClass(item.id)" v-for="(item, index) in dictListData" 
								@click="tagSelectClick(item)">{{item.itemText}}</view>
							</view>
						</template>
						<template v-if="type == 'image'">
							<view class="top-title">助教照片<text class="num">（{{picList.length}}/9）</text></view>
							<view class="flex-wrap-row">
								<view class="image-view" v-for="(item, index) in picList" :class="((index+1)%3)==0?'':'right-14'" @click="imagePreviewClick(item)">
									<image class="image-video" :src="item.videoAddress" mode="aspectFill"></image>
									<image class="delete" :src="asserts.ic_delete" @click.stop="deleteVideoImage(item.id)"></image>
								</view>
								<view>
									<custom-choose-media @selectBack="selectImage" :count="9" v-if="picList.length<9">
										<template #content>
											<view class="file-add-layout">
												<image :src="asserts.ic_add_upload"></image>
											</view>
										</template>
									</custom-choose-media>
								</view>
							</view>
						</template>
						<template v-if="type == 'video'">
							<view class="top-title">助教视频<text class="num">（{{videoList.length}}/9）</text></view>
							<view class="flex-wrap-row">
								<view class="video-item" v-for="(item, index) in videoList" :class="((index+1)%3)==0?'':'right-14'" @click="videoPlayClick(item)">
									<image class="image-video" mode="aspectFill" :src="item.videoAddress + '?x-oss-process=video/snapshot,t_0,f_jpg'" @click="videoClick(item)"></image>
									<!-- <video class="image-video" :src="item.videoAddress" :show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false"></video> -->
									<image :src="asserts.ic_video_play" class="video-play"></image>
									<image class="delete" :src="asserts.ic_delete" @click.stop="deleteVideoImage(item.id)"></image>
								</view>
								<view>
									<custom-choose-media @selectBack="selectVideo" :mediaType="['video']" uploadType="video" :count="9" v-if="videoList.length<9">
										<template #content>
											<view class="file-add-layout">
												<image :src="asserts.ic_add_upload"></image>
											</view>
										</template>
									</custom-choose-media>
								</view>
							</view>
						</template>
						<template v-if="type == 'serviceTime'">
							<picker mode="time" @change="startTimeChange">
								<view class="item-row">
									<view class="flex gray-col">开始时间</view>
									<view>{{assistantInfo.businessHoursStart || '请选择'}}</view>
									<image class="right-img" :src="asserts.ic_arrow_right"></image>
								</view>
							</picker>
							<picker mode="time" @change="entTimeChange">
								<view class="item-row">
									<view class="flex gray-col">结束时间</view>
									<view>{{assistantInfo.businessHoursEnd || '请选择'}}</view>
									<image class="right-img" :src="asserts.ic_arrow_right"></image>
								</view>
							</picker>
						</template>
					</template>
				</common-list-view>
				<custom-bottom-button text="保存" @confirm="confirmClick" v-if="(type != 'video' && type != 'image')"></custom-bottom-button>
			</view>
		</template>
	</custom-page>
</template>

<script>
	import {
		apis
	} from '../../global/config.js'
	import { getTimeMills, getFormatTime } from '../../utils/utils'
	export default {
		data() {
			return {
				title: '',
				type: '',
				selectIndex: -1,
				dictListData: [],
				selectDictIds: [],
				videoList: [],
				picList: [],
				assistantInfo: {},
			}
		},
		computed: {
			getTitle(){
				let type = this.type
				if(type == 'tag'){
					return '个性标签'
				}else if(type == 'image'){
					return '助教图片'
				}else if(type == 'video'){
					return '助教视频'
				}else if(type == 'serviceTime'){
					return '服务时间'
				}else{
					return ''
				}
			},
			
			getTagClass(){
				return (value)=> {
					if(this.selectDictIds.indexOf(value)>-1){
						return 'tag-item-select'
					}else{
						return 'tag-item'
					}
				}
			}
		},
		onLoad(val) {
			this.type = val.type
			this.getAssistantDetailToken()
		},
		methods: {
			//助教详情
			getAssistantDetailToken(){
				this.requestCenter.getAssistantDetailToken().then(res => {
					this.assistantInfo = res
					if(this.type == 'tag'){
						if(res.label){
							let labelList = res.label.split(',')
							for (let bean in labelList) {
								this.selectDictIds.push(Number(bean))
							}
						}
						this.getDictList()
					}else if(this.type == 'image' || this.type == 'video'){
						this.getAssistantVideoImage()
					}
				})
			},
			
			//获取数据字典
			getDictList(){
				this.requestCenter.getDictList(5).then(res => {
					this.dictListData = res
				})
			},
			
			//视频点击
			videoClick(item){
				uni.navigateTo({
					url: '/pages/common-video-player/common-video-player',
					success: (res) => {
					    res.eventChannel.emit('videoInfo', { data: item.videoAddress})
					}
				})
			},
			
			//获取助教照片或视频
			getAssistantVideoImage(){
				let params = {
					userId: this.assistantInfo.userId
				}
				this.requestCenter.getAssistantVideoImage(params).then(res => {
					if(res){
						this.videoList = res.videoList
						this.picList = res.picList
					}
				})
			},
			
			//标签选择
			tagSelectClick(item){
				if(this.selectDictIds.indexOf(item.id)>-1){
					this.selectDictIds.splice(this.selectDictIds.indexOf(item.id), 1)
				}else{
					this.selectDictIds.push(item.id)
				}
			},
			
			//删除图片或视频
			deleteVideoImage(id){
				let params = {
					id: id
				}
				uni.showModal({
					title: '确定删除吗？',
					success: (modal) => {
						if (modal.confirm) {
							this.requestCenter.deleteVideoImage(params).then(res => {
								this.getAssistantVideoImage()
							})
						}
					}
				})
			},
			
			//图片预览
			imagePreviewClick(item){
				uni.previewImage({
					urls: [item.videoAddress],
					current: 0
				})
			},
			
			//播放视频
			videoPlayClick(item){
				uni.navigateTo({
					url: '/pages/square-video-detail/square-video-detail?isShowInfo=0',
					success: function(res) {
					    res.eventChannel.emit('squareVideoInfo', { data: item})
					},
				})
			},
			
			//图片选择
			selectImage(data){
				let avatarUrl = data.data
				let uploadParams = {
					operateType: 1,		//oss操作类型枚举 1-用户 2-商品 3-展现
					ossStorageType: 1,		//oss存储类型枚举 1-图片 2-文本 3-视频	
				}
				let addParams = {
					isShow: '0',		//权限设置0-全部人可见1-自己可见	
					showType: '3',		//类别0-广场助教风采视频1-广场助教图片2-个人中心视频3-个人中心图片4-广场球友发风采视频5-广场球友风采图片	
				}
				this.uploadFileImage(avatarUrl, uploadParams, addParams)
			},
			
			//选择视频
			selectVideo(data){
				let avatarUrl = data.data
				let uploadParams = {
					operateType: 1,		//oss操作类型枚举 1-用户 2-商品 3-展现
					ossStorageType: 3,		//oss存储类型枚举 1-图片 2-文本 3-视频	
				}
				let addParams = {
					isShow: '0',		//权限设置0-全部人可见1-自己可见	
					showType: '2',		//类别0-广场助教风采视频1-广场助教图片2-个人中心视频3-个人中心图片4-广场球友发风采视频5-广场球友风采图片	
				}
				this.uploadFileImage(avatarUrl, uploadParams, addParams)
			},
			
			uploadFileImage(avatarUrl, uploadParams, addParams){
				// #ifdef H5 || APP-PLUS
				uni.showLoading({
					title:'加载中'
				})
				uni.uploadFile({
					url: apis.uploadFile, //上传文件接口地址
					filePath: avatarUrl,
					formData: uploadParams,
					name: 'file',
					success: (uploadFileRes) => {
						uni.hideLoading()
						if(uploadFileRes.statusCode == '200'){
							let uploadFileResFor = JSON.parse(uploadFileRes.data)
							addParams.videoAddress = uploadFileResFor.data.fileUrl
							this.requestCenter.addSquareAssistantVideo(addParams).then(res => {
								uni.showToast({
									title: "发布成功，等待审核",
								})
								this.getAssistantVideoImage()
							})
						}
					}
				});
				// #endif
				// #ifdef MP
				this.requestCenter.uploadFile(avatarUrl, uploadParams).then(upload => {
					if (upload) {
						let addParams = {
							videoAddress: upload.fileUrl,
							isShow: '0',		//权限设置0-全部人可见1-自己可见	
							showType: '3',		//类别0-广场助教风采视频1-广场助教图片2-个人中心视频3-个人中心图片4-广场球友发风采视频5-广场球友风采图片	
						}
						this.requestCenter.addSquareAssistantVideo(addParams).then(res => {
							uni.showToast({
								title: "发布成功，等待审核",
							})
							this.getAssistantVideoImage()
						})
					}
				})
				// #endif
			},

			//选择开始时间
			startTimeChange(e){
				let selectValue = e.detail.value
				if(this.assistantInfo.businessHoursEnd){
					let formatStartValue = getFormatTime('', 'ymd') + ' ' + selectValue
					let formatEndValue = getFormatTime('', 'ymd') + ' ' + this.assistantInfo.businessHoursEnd
					if(getTimeMills(formatStartValue) > getTimeMills(formatEndValue)){
						uni.showToast({
							title: "结束时间不能小于开始时间"
						})
						return false
					}
				}
				this.assistantInfo.businessHoursStart = selectValue
			},
			//选择结束时间
			entTimeChange(e){
				let selectValue = e.detail.value
				if(this.assistantInfo.businessHoursStart){
					let formatStartValue = getFormatTime('', 'ymd') + ' ' + this.assistantInfo.businessHoursStart
					let formatEndValue = getFormatTime('', 'ymd') + ' ' + selectValue
					if(getTimeMills(formatStartValue) > getTimeMills(formatEndValue)){
						uni.showToast({
							title: "结束时间不能小于开始时间"
						})
						return false
					}
				}
				this.assistantInfo.businessHoursEnd = selectValue
			},
			
			//点击确定
			confirmClick(){
				let params = {}
				let type = this.type
				if(type == 'tag'){
					this.assistantInfo.label = this.selectDictIds.join(',')
				}
				this.assistantInfo.birthdayTime = getTimeMills(this.assistantInfo.birthdayTime)
				this.requestCenter.updateAssistantDetail(this.assistantInfo).then(res => {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('personalEdit')
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.list-view{
		flex: 1;
		overflow: hidden;
		background-color: white;
	}
	.top-title{
		padding: 32rpx;
		font-size: 32rpx;
		color: #021624;
		background-color: #F9F9FB;
	}
	
	.flex-wrap-row{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 32rpx;
		box-sizing: border-box;
		background-color: white;
		/* #ifndef H5 */
		flex: 1;
		/* #endif */
	}
	.tag-item,
	.tag-item-select{
		width: 208rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		margin-right: 20rpx;
		margin-bottom: 32rpx;
	}
	.tag-item{
		background: #FFFFFF;
		color: #585F70;
		border: 2rpx solid #EEEEEE;
	}
	.tag-item-select{
		background: #E0F9FF;
		color: #01CBFF;
		border: 2rpx solid #01CBFF;
	}
	.num{
		font-size: 32rpx;
		color: #ABAFB7;
	}
	.image-view,
	.video-item{
		position: relative;
		margin-top: 16rpx;
		.delete{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: -5rpx;
			right: -5rpx;
		}
	}
	.image-video{
		width: 216rpx;
		height: 280rpx;
		border-radius: 16rpx;
	}
	.video-play{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 32rpx;
		right: 16rpx;
	}
	.file-add-layout{
		width: 216rpx;
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		background-color: #F5F5F5;
		margin-top: 16rpx;
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.right-14{
		margin-right: 14rpx;
	}
	.item-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100rpx;
		background-color: white;
		padding: 0 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		.right-img{
			width: 20rpx;
			height: 24rpx;
			margin-left: 26rpx;
		}
		.flex{
			flex: 1;
		}
		.gray-col{
			font-size: 28rpx;
			color: #585F70;
		}
	}
</style>
